<template>
  <div id="login">
    <div class="login-main">
      <div class="form">
        <div class="form-title">欢迎使用微信点餐的后台管理</div>
        <el-form
            :model="data.loginForm"
            :rules="data.loginRules"
            ref="refLoginForm"
        >
          <el-form-item prop="loginName">
            <el-input
                v-model="data.loginForm.loginName"
                placeholder="请输入邮箱/手机号"
                type="text"
                prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="data.loginForm.password"
                placeholder="请输入密码/验证码"
                type="password"
                prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
            :disabled="data.isDisabled"
            style="width: 100%"
            type="primary"
            @click="submitForm('refLoginForm')"
        >
          {{ data.btnName }}
        </el-button>
        <p style="display: flex; justify-content: center">
          <span>
            还没有账号？<span @click="toRegister" style="color: #3894ff; cursor: pointer">立即注册！</span>
          </span>
        </p>
      </div>
    </div>
    <div class="img-main">
      <div class="content">
        <div class="intro">
          管理你的商店信息
        </div>
        <img src="../../assets/img/login/login.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router/dist/vue-router";
import {reactive, ref} from "vue";
import {Debounce} from "@/tool";
import {httpPostManage} from "@/api/httpService";
import {ElMessage} from "element-plus";
import VueCookies from "vue-cookies";


const router = useRouter();

const refLoginForm = ref(null);
const data = reactive({
  loginForm: {
    loginName: "",
    password: ""
  },
  loginRules: {
    loginName: [
      {
        required: true,
        message: "请输入账号",
        trigger: "blur"
      }
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur"
      }
    ]
  },
  isDisabled: false,
  btnName: "登录",
  btnLoading: false
});

/**点击登录 */
const submitForm = Debounce(function () {
  refLoginForm.value.validate(async (valid) => {
    if (valid) {
      data.isDisabled = true;
      data.btnLoading = true;
      data.btnName = "登录中";

      let url = "/signIn";
      let params = {
        userId: data.loginForm.loginName,
        userPassword: data.loginForm.password
      }

      let res = await httpPostManage(url, params);

      if (res.code === "10000") {
        VueCookies.set("tokenWeb", res.data.token, 24 * 60 * 60);
        localStorage.setItem("userName", res.data.userName);
        if(res.data.userRole === 2) {
          await router.push("/shopOwner/homePage");
        } else if (res.data.userRole === 3) {
          await router.push("/manager");
        }
      } else {
        ElMessage.warning("请检查用户名和密码是否正确");
        data.isDisabled = false;
        data.btnLoading = false;
        data.btnName = "登录";
      }
    } else {
      return false;
    }
  });
});

const toRegister = () => {
  router.push({name: 'Register' });
};

</script>

<style lang="scss" scoped>
@import "@/assets/style/login/login.scss";
</style>